{% extends 'base-layer.html' %}
{% load staticfiles %}
{% block css %}
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap-datetimepicker.min.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/select2/select2.min.css' %}">
{% endblock %}

{% block main %}
    <div class="box box-danger">
        <form class="form-horizontal" id="addForm" method="post">
            {% csrf_token %}
            <input type="hidden" name="id" value="{{ user.id }}"/>
            <input type="hidden" name="user" value="save"/>
            <div class="box-body">
                <fieldset>
                    <legend><h4>基本信息</h4></legend>
                    <div class="form-group has-feedback">
                        <label class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-3">
                            <input class="form-control" name="name" type="text" value="{{ user.name }}"/>
                        </div>

                        <label class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-3">
                            <select class="form-control" name="gender">
                                <option value="{{ user.gender }}">{{ user.get_gender_display }}</option>
                                <option value="male">男</option>
                                <option value="female">女</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group has-feedback">
                        <label class="col-sm-2 control-label">生日</label>
                        <div class="col-sm-3">
                            <input class="form-control pull-right form_datetime" name="birthday" type="text"
                            value="{{ user.birthday|date:'Y-m-d' }}">
                        </div>

                        <label class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-3">
                            <input class="form-control" name="username" type="text" value="{{ user.username }}">
                        </div>
                    </div>

                    <div class="form-group has-feedback">
                        <label class="col-sm-2 control-label">状态</label>
                        <div class="col-sm-6">
                            <label class="control-label">
                                <input type="radio" class="minimal" name="is_active" value="True"
                                       {% ifequal user.is_active True %}checked{% endifequal %}>启用
                            </label>
                            <label class="control-label">
                                <input type="radio" class="minimal" name="is_active" value="False"
                                       {% ifequal user.is_active False %}checked{% endifequal %}>禁用
                            </label>
                        </div>
                    </div>

                    <legend><h4>联系信息</h4></legend>
                    <div class="form-group has-feedback">
                        <label class="col-sm-2 control-label">手机号</label>
                        <div class="col-sm-3">
                            <input class="form-control" name="mobile" type="text"
                            value="{{ user.mobile }}">
                        </div>

                        <label class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-3">
                            <input class="form-control" name="email" type="text"
                            value="{{ user.email }}">
                        </div>
                    </div>

                    <legend><h4>职员信息</h4></legend>
                    <div class="form-group has-feedback">
                        <label class="col-sm-2 control-label">入职日期</label>
                        <div class="col-sm-3">
                            <input class="form-control pull-right form_datetime"
                                   name="date_joined" type="text"
                                   value="{{ user.date_joined|date:'Y-m-d' }}">
                        </div>

                        <label class="col-sm-2 control-label">部门</label>
                        <div class="col-sm-3">
                            <select class="form-control select2" style="width:100%;" name="department">
                                <option value="{{ user.department.id }}">{{ user.department.name|default:'--部门--' }}</option>
                                {% for structure in structures %}
                                    <option value="{{ structure.id }}">{{ structure.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>

                    <div class="form-group has-feedback">
                        <label class="col-sm-2 control-label">岗位</label>
                        <div class="col-sm-3">
                            <input class="form-control" name="post" type="text" value="{{ user.post|default_if_none:'' }}">
                        </div>
                        <label class="col-sm-2 control-label">上级</label>
                        <div class="col-sm-3">
                            <select name="superior" class="form-control select2" style="width:100%;">
                                <option value="{{ user.superior.id }}">{{ user.superior.name|default:'--上级--' }}</option>
                                {% for user in users %}
                                    <option value="{{ user.id }}">{{ user.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>

                    <div class="form-group has-feedback">

                        <label class="col-sm-2 control-label">所属角色组</label>
                        <div class="col-sm-6">
                            {% for role in roles %}
                                <label class="form-control">
                                    <input type="checkbox" class="minimal" name="roles" value="{{ role.id }}"
                                           {% if role in user_roles %} checked {% endif %}>{{ role.name }}
                                </label>
                            {% endfor %}
                        </div>
                    </div>

                </fieldset>
            </div>
            <div class="box-footer">
                <div class="row span7 text-center">
                    <button type="button" id="btnCancel" class="btn btn-default margin-right">刷新</button>
                    <button type="button" id="btnSave" class="btn btn-info margin-right">保存</button>
                </div>
            </div>
        </form>
    </div>
{% endblock %}

{% block javascripts %}
    <script src="{% static 'bootstrap/js/bootstrap-datetimepicker.js' %}"></script>
    <script src="{% static 'plugins/select2/select2.full.min.js' %}"></script>
    <script type="text/javascript">
        $("#btnCancel").click(function () {
            window.location.reload();
        });

        $("#btnSave").click(function () {
           var data=$("#addForm").serialize();
           $.ajax({
               type:$("#addForm").attr('method'),
               url:"{% url 'system:basic-user-update' %}",
               data:data,
               cache:false,
               success:function (msg) {
                   if(msg.status == 'success'){
                       layer.alert('数据保存成功！',{icon:1},function (index) {
                           parent.layer.closeAll();
                       });
                   } else if (msg.status == 'fail'){
                       layer.alert('数据保存失败！',{icon:5});
                   }
                   return ;
               }
           });
        });

        /* input 时间输入选择 */
        $(".form_datetime").datetimepicker({
            language:'zh',
            minView:'month',
            autoclose:1,
            weekStart:1,
            todayBtn:1,
            todayHighlight:1,
            forceParse:0,
            showMeridian:1,
            format:'yyyy-mm-dd',
        }).on("changeDate",function (ev) {
            $(this).datetimepicker("hide");
        });

        $(function () {
            //初始化 select2 元素
            $(".select2").select2();
        });

    </script>

{% endblock %}